<template>
  <div>
    <alert v-model="alertShow.showmsg" :title="'提示'" @on-show="onShow" @on-hide="onHide">{{alertShow.msg}}</alert>
    <Yq-header v-if="isShowHeader"></Yq-header>
    <img src="../../../assets/fxTile.png"  width="100%">
    <!--<img src="../../../assets/fxTile.png" width="100%">-->
    <div style='width: 100%;position: relative;' align="center">
      <flexbox :gutter="0" style="position: absolute;margin-top: -40px">
        <flexbox-item><div class="flex-demo">
          <img :src=avatar alt="用户头像" style="width: 50px;height: 50px;border-radius: 50%;border: 2px solid #ffffff;">
          <p style="font-weight: bold;font-size: 12px;color: #aaa9a9;margin-top: -10px">{{nick}}</p>
          <p style="font-size: 12px;color: #aaa9a9">您的好友{{nick}}邀请您使用孝行通</p>
          <!--<p style="font-size: 12px;color: #000000">积分<span style="font-size: 20px;">当钱花</span> 邀友<span style="font-size: 20px;">赚现金</span></p>-->
          <span style="display: block;border-top: solid 1px white;height: 1px;"></span>
        </div></flexbox-item>
      </flexbox>
    </div>
    <img src="../../../assets/aaa.png"  width="100%" style="margin-top: -8px;display:block">
  </div>
</template>

<script>
  import { Group, Cell, Flexbox, FlexboxItem, Divider, XButton, Qrcode, Alert } from 'vux'
//  import * as types from '../../../store/types'
  import * as urls from '../../../api/urls'

  export default {
    components: {
      Group,
      Cell,
      Flexbox,
      FlexboxItem,
      Divider,
      XButton,
      Qrcode,
      Alert
    },
    data () {
      return {
        isShowHeader: false,
        userId: '',
        uid: '',
        alertShow: {
          showmsg: false,
          msg: ''
        },
        avatar: '',
        nick: '',
        invitationNum: 5,
        invitationList: [
          {
            src: '../../../../static/images/userImg.png',
            name: '王小明',
            phone: '13800000000'
          }, {
            src: '../../../../static/images/userImg.png',
            name: '王小明',
            phone: '13800000000'
          }, {
            src: '../../../../static/images/userImg.png',
            name: '王小明',
            phone: '13800000000'
          }
        ]
      }
    },
    methods: {
      onClick (i) {
      },
      onShow () {
        // 弹窗出现时触发
      },
      onHide () {
        // 弹窗关闭时触发
      },
      getUserInfo () {
        let that = this
        that.http(urls.userIndex, {userId: this.uid}, function (res) {
          if (res.status === 100) {
            that.nick = String(res.data.user.nick)
            that.avatar = res.data.user.avatar
            that.diyweixinfn4()
          } else {
            that.alertShow.showmsg = true
            that.alertShow.msg = res.errMsg
          }
        }, function (res) {
          that.alertShow.showmsg = true
          that.alertShow.msg = res
        })
      },
      getQueryString (name) {
        let userId = window.location.href.substr('userId='.length + window.location.href.indexOf('?') + 1, window.location.href.length)
        return userId
      },
      diyweixinfn4 () {
        let that = this
        // let userId = window.sessionStorage.getItem('userId')
        let url = window.location.origin
        window.sessionStorage.setItem('avatar', that.avatar)
        that.avatar = window.sessionStorage.getItem('avatar')
        let link = url + '/api/wxAuth/index?type=t1'
        that.$wechat.onMenuShareAppMessage({
          title: '你的好友邀你加入孝行通', // 分享标题
          desc: '孝行通掌上养老，为老人想得更多，全方位居家养老服务，数百种中老年适用商品，让老人居家幸福，健康安心，助你工作轻松，家庭和谐。', // 分享描述
          link: link, // 分享链接
          imgUrl: that.avatar, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
        that.$wechat.onMenuShareTimeline({
          title: '你的好友邀你加入孝行通', // 分享标题
          link: link, // 分享链接
          imgUrl: that.avatar, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
      }
    },
    mounted: function () {
      document.getElementsByClassName('weui_tabbar')[0].style.display = 'none'
      document.getElementsByClassName('weui_tab_bd')[0].style.paddingBottom = '0'
      if (window.sessionStorage.getItem('userId') === '' || window.sessionStorage.getItem('userId') === null || window.sessionStorage.getItem('userId') === undefined) {
        if (window.sessionStorage.getItem('uid') === '' || window.sessionStorage.getItem('uid') === null || window.sessionStorage.getItem('uid') === undefined) {
          let userId = window.location.href.replace(/.*userId=(\w*)&?.*/, '$1')
          let uid = window.location.href.replace(/.*uid=(\w*)&?.*/, '$1')
          this.userId = userId
          this.uid = uid
          if (this.userId !== '' && this.userId !== null && this.userId !== undefined) {
            window.sessionStorage.setItem('userId', this.userId)
            window.sessionStorage.setItem('uid', this.uid)
            this.getUserInfo()
//            this.flexBgStyle = 'height:' + '100%;' +
//              'background-size: ' + document.body.clientWidth + 'px' + ' ' + document.body.clientHeight + 'px;'
          } else {
            let url = window.location.origin
            window.location.href = url + '/api/wxAuth/index?type=t1'
          }
        }
      } else {
        this.userId = window.sessionStorage.getItem('userId')
        this.uid = window.sessionStorage.getItem('uid')
        this.getUserInfo()
//        this.flexBgStyle = 'height:' + '100%;' +
//          'background-size: ' + document.body.clientWidth + 'px' + ' ' + document.body.clientHeight + 'px;'
//        this.$wechat.showOptionMenu()
      }
    }
  }
</script>

<style scoped="scoped">
  .flex-demo {
    text-align: center;
    background-clip: padding-box;
  }
  .flex-demo>p{
    text-align: center;
    color: white;
    font-size: 14px;
  }
  .flex-userInfo >p{
    color: white;
    text-align: left;
    line-height: 28px;
    font-size: 14px;
  }
  .flexBg{
    width: 100%;margin:0;padding:0;position:absolute;
    background: url("../../../assets/fenxiangyaoqing.png");
    background-size: 100%;
  }
</style>
